<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>答题页面</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      list-style: none;
    }

    body {
      background-color: #FFFFFF
    }

    .status-bar {
      background-color: #1DBF7B;
      height: 1.5rem;
      position: relative;
      color: #FFFFFF;
      padding: 2rem;
    }

    .page-title {
      font-size: 1.0625rem;
      font-weight: bold;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .h2 {
      color: black;
      font-size: 0.99rem;
      padding: 1rem 1.4rem;
    }

    .shadow {
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
      border: 0.01rem solid rgba(0, 0, 0, 0.05);
    }

    .title {
      padding: 1rem;
    }

    .h3 {
      color: #1DBF7B;
    }

    h4 {
      color: #000;
      margin-top: 0.3rem;
    }

    .option-label {
      display: flex;
      align-items: center;
      padding: 0.5rem 15px;
      border: 2px solid transparent;
      margin: 1rem 0;
      cursor: pointer;
      transition: all 0.3s;
      border-radius: 6px;
      user-select: none; /* 禁止选中文字 */
    }

    .option-label:hover {
      background-color: #f0f0f0;
    }

    .option-label input[type="checkbox"] {
      display: none;
    }

    /* 仅选中时变色的部分：字母方框 */
    .option-label input[type="checkbox"]:checked + .option-content .option-letter {
      background-color: #FF4D4F;
      color: white;
      border: 2px solid #FF4D4F;
    }

    .option-content {
      display: flex;
      align-items: center;
      font-size: 1rem;
      color: #666;
      width: 100%;
    }

    .option-letter {
      width: 30px;
      height: 30px;
      line-height: 28px;
      text-align: center;
      margin-right: 1rem;
      font-weight: bold;
      border: 2px solid #ccc;
      border-radius: 4px;
      color: #333;
      transition: all 0.3s;
      flex-shrink: 0;
      user-select: none;
    }
    .answer{
        width:20.1rem;
        height:4.5rem;
        background-color: #F4F5F7;
        
        position:relative;
        border-radius: 0.4rem;

        margin: 0rem 2.3rem  0.3rem  2.3rem;
    }
    /*答案区-正确答案参数*/
    .h6{
        color:#222222;
        position: absolute;
        top:0.8rem;
        font-size:0.8rem;
        left:23%

    }
    .h7{color:#222222;
        position: absolute;
        top:0.8rem;
        font-size:0.8rem;
        left:65%
}
    .h8{
        color: #1DBF7B;
        position: absolute;
        top:1.8rem;
        font-size:1.5rem;
        left:29%

        
    }
    .h9{
        
        color: #FF4A52;
        position: absolute;
        top:1.8rem;
        font-size:1.5rem;
        left:70%

    }
    .h10{
        color:#222222 ;
        padding:1.3rem 6rem 0rem 2rem;
    }
     nav img{
        width:16px;
        height: 16px;
        background-color: #1DBF7B;
        margin:0.1rem 0.5rem 1.2rem 0;

    }
    nav .h11{
        color: #666666;
        padding: 0 1.9rem ;

    }
     ba .bottle{
        position:absolute;
        right:0;
        bottom: 0;
        left:0;
        width:100%;
        height:6rem;
        background-color:#FAFAFA;

    }
    ba img{
        width:32px;
        height:32px;
        background-color: #666666;
        margin:0.6rem 2rem;

    }
    .h12{
        font-size:0.9rem;
        color:#222222;
        position: absolute;
        top:3rem;
        left:2.1rem;
    }
  .h13{
        color:#222222;
        font-size:0.9rem;
        position: absolute;
        top:3rem;
        left:8.1rem;
    }
  .h14{
        color:#222222;
        font-size:0.9rem;
        position: absolute;
        top:3rem;
        left:14.1rem;
    }
      .h15{
        color:#222222;
        font-size:0.9rem;
        position: absolute;
        top:3rem;
        left:20.1rem;
    }
   
  </style>
</head>
<body>
  <header class="status-bar"> 
    <h1 class="page-title">开始答题</h1>
  </header>

  <div class="h2">经济基础法</div>
  <div class="shadow"></div>

  <div class="title">
    <div style="float: left;" class="h3">（单选题）</div>
    <div style="float: left;" class="h4">下列反映的是经营成果要素的有( )。</div>
    <div style="clear:both;"></div>

    <!-- 选项 A -->
    <label class="option-label">
      <input type="checkbox" name="answer" value="a">
      <div class="option-content">
        <div class="option-letter">A</div>
        <div>经济目标</div>
      </div>
    </label>

    <!-- 选项 B -->
    <label class="option-label">
      <input type="checkbox" name="answer" value="b">
      <div class="option-content">
        <div class="option-letter">B</div>
        <div>成本目标</div>
      </div>
    </label>

    <!-- 选项 C -->
    <label class="option-label">
      <input type="checkbox" name="answer" value="c">
      <div class="option-content">
        <div class="option-letter">C</div>
        <div>财务目标</div>
      </div>
    </label>

    <!-- 选项 D -->
    <label class="option-label">
      <input type="checkbox" name="answer" value="d">
      <div class="option-content">
        <div class="option-letter">D</div>
        <div>经营目标</div>
      </div>
    </label>
  </div>
<!-- 答案区 -->
 <div class ="answer">
    <div class=" h6"><b>正确答案</b></div>
    <div class=" h7"><b>你的答案</b></div>
    <div class=" h8"><b>C</b></div>
    <div class=" h9"><b>A</b></div>
 </div>
 <nav>
 <div  class ="h10"><img src=""><b>解析：</b></div>
 <div class ="h11">选项C反映企业的财务状况。</div>
</nav>
<ba>
<div class ="bottle">
<img src="" style="float: left;"><img src="" style="float: left;"><img src="" style="float: left;"><img src="" style="float: left;">
<div style="clear:both;"></div>
<div class="h12" >题卡</div><div class="h13">答案</div><div class="h14">交卷</div><div class="h15">55:00</div>

</div>

</ba>


</body>
</html>
